<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒/框模型</title>
		<style>
		div{
			 /*div 空间 特点：有宽没高  设置宽高*/
			 width:200px;
			 height:200px;
			 border:1px solid red;
			 /*1.什么是盒/框模型?	
             任何元素存在于盒模型中
             2.盒模型包括什么?
             外边距+边框+内边距+内容
             3.外边距margin属性
             边框以外距离使用方式与border类似【微调:推】
            语法: margin:属性值: 为1个值，顺时针，代表方向:上 右 下 左
			                    为2个值，顺时针，代表方向:上下 左右
								为3个值，顺时针，代表方向:上 右左 下
								为4个值，顺时针，代表方向:上 右 下 左
			3.1外边距-方向属性
				margin-left:数值px;    √  x方向微调
				margin-right:数值px;
				margin-top:数值px;     √  Y方向微调
				margin-bottom:数值px;	
			4.内边距padding属性,padding-方向与margin-方向用法一致
				边框与内容之间的距离 	使用方式与margin类似【精灵图：撑】
            语法: padding:属性值: 为1个值，顺时针，代表方向:上 右 下 左
			                    为2个值，顺时针，代表方向:上下 左右
								为3个值，顺时针，代表方向:上 右左 下
								为4个值，顺时针，代表方向:上 右 下 左							
			 */
			padding:50px 100px;
			padding:10px 20px 30px;
			margin:100px;
			margin:100px 200px;
			margin:100px 200px 300px;
			margin:100px 200px 300px 400px;
			margin-left:150px;
			/*元素自适应居中*/
			margin:0 auto;
			
		 }
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>